<template>
	<v-content full ref="content" background="#ffad01" padding-top="50" padding-bottom="150">
		<v-header back title="在线考试" background="#fff"></v-header>
		<div class="main">
			<div class="title">{{ message.examName }}</div>
			<div class="plaid">
				<div class="item">
					<image class="image" src="/static/image/exam/plaid-1.png"></image>
					<div class="tip">
						<div class="name">试卷总分</div>
						<div class="number">{{ message.totalScore }}分</div>
					</div>
				</div>
				<div class="item">
					<image class="image" src="/static/image/exam/plaid-2.png"></image>
					<div class="tip">
						<div class="name">及格分</div>
						<div class="number">{{ message.qualifiedScore }}分</div>
					</div>
				</div>
				<div class="item">
					<image class="image" src="/static/image/exam/plaid-3.png"></image>
					<div class="tip">
						<div class="name">总题数</div>
						<div class="number">{{ questionLength }}题</div>
					</div>
				</div>
				<div class="item">
					<image class="image" src="/static/image/exam/plaid-4.png"></image>
					<div class="tip">
						<div class="name">考题时长</div>
						<div class="number">{{ message.examTime }}分钟</div>
					</div>
				</div>
			</div>
			<div v-if="message.isLimited == 1">
				<div class="sub-title">剩余考试次数</div>
				<div class="details">{{ message.remainingExamNum }}次</div>
			</div>
			<div class="sub-title">考试时间</div>
			<div class="details">{{ message.examStartTime }} 至 {{ message.examEndTime }}</div>
			<div class="sub-title">考试说明</div>
			<div class="details">{{ message.examExplain || "无" }}</div>
			<div class="button radius" @click="onAnswer">立即答题</div>
		</div>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
export default {
	name: "exam-start",
	mixins: [mixins],
	data() {
		return {
			hasExam: false,
		}
	},
	computed: {
		message() {
			return this.$store.state.exam.message
		},
		questionLength() {
			return this.$store.getters["exam/questionLength"]
		},
	},
	methods: {
		async init() {
			this.$store.dispatch("exam/getExam", {
				id: this.query.id,
				type: "new",
			})

			this.$store.commit("exam/setCurrent", 0)
			const data = await this.$store.dispatch("exam/isHasExam", this.query.id)

			this.hasExam = data

			if (data) {
				this.showMessage.modal({
					title: "温馨提示",
					content: "您有未完成的试卷, 是否继续答题 ?",
					confirmText: "继续答题",
					cancelText: "重新答题",
					confirm: next => {
						next()
						this.$store.dispatch("exam/getExam", {
							id: this.query.id,
						})

						this.onAnswer()
					},
					cancel: () => {
						this.hasExam = false
						this.$store.dispatch("exam/clearExam", this.query.id)
					},
				})
			}
		},
		onAnswer() {
			const nowDate = new Date().getTime()
			const startTime = new Date(this.message.examStartTime).getTime()
			const endTime = new Date(this.message.examEndTime).getTime()
			if (nowDate < startTime) {
				this.showMessage.error("考试还未开始")
			} else if (nowDate > endTime) {
				this.showMessage.error("考试已经结束")
			} else {
				if (!this.hasExam) {
					this.$store.dispatch("exam/getExam", {
						id: this.query.id,
						type: "set",
					})
				}
				this.toPage(
					"/pages/exam/answer",
					{
						id: this.query.id,
						type: "answer",
					},
					"replace"
				)
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.main {
	margin: auto;
	background: #fff;
	border-radius: 20rpx;
	width: 635rpx;
	padding: 50rpx;
	box-sizing: border-box;
	position: relative;
	&::before {
		content: "";
		position: absolute;
		z-index: 2;
		width: 98rpx;
		height: 126rpx;
		background: url("@/static/image/exam/icon-pencil.png") no-repeat top center / contain;
		top: 355rpx;
		right: -46rpx;
	}
	.title {
		font-size: 38rpx;
		padding-bottom: 40rpx;
	}
	.plaid {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		border-bottom: 1px solid #ededed;
		margin-bottom: 55rpx;
		.item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 50%;
			box-sizing: border-box;
			padding-left: 50rpx;
			padding-block: 35rpx;
			&:nth-of-type(2n) {
				border-left: 1px solid #ededed;
			}
			&:nth-of-type(1),
			&:nth-of-type(2) {
				border-bottom: 1px solid #ededed;
			}
			.image {
				width: 60rpx;
				height: 60rpx;
			}
			.tip {
				padding-left: 25rpx;
				.name {
					font-size: 30rpx;
					color: #898989;
				}
				.number {
					font-size: 30rpx;
				}
			}
		}
	}
	.sub-title {
		margin-top: 35rpx;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #898989;
		font-size: 28rpx;
		&::before {
			content: "";
			display: block;
			width: 10rpx;
			height: 24rpx;
			border-radius: 100px;
			background: $color;
			margin-right: 10rpx;
		}
	}
	.details {
		font-size: 25rpx;
		word-wrap: break-word;
	}
	.button {
		margin-top: 60rpx;
		height: 100rpx;
	}
}
</style>
